<template>
	<view class="main_box">
		<view class="fix_title">
			输入验证码
		</view>
		<view class="txt">
			验证码已发送至：+{{mobileNo}}
		</view>
		<view class="confirm-input">
			<view @tap="focusInput(index)" class="mock-input" v-for="(item, index) in inputNumber" :key="index">
				<view class="mock-input-item">{{smsCode[index] || ''}}</view>
				<view :class="['focus', {show: focusIndex == index}]"></view>
			</view>
			<input class="input" type="number" :focus="focus" @blur="focusIndex=-1" @focus="focusInput"
				v-model="smsCode" maxlength="6" />
		</view>
		<view class="confirm bubble" v-show="off2" @click="reSend">
			重新发送验证码
		</view>
		<view class="resCode" v-show="!off2">
			{{count}}s后重新发送
		</view>
	</view>
</template>

<script>
	import {
		getPhoneCode,
		getTwoUserList,
		getMoneny,
		idCardOCR,
		rechargeCode,
		rechargePay,
		getTwoResult,
		twoUserToOneUser,
		twoUserWithOneUser,
		quickPaymentSendCode,
		quickPaymentSuccess
	} from '../../common/api/blank.js';
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	export default {
		data() {
			return {
				smsCode: '',
				inputNumber: [1, 2, 3, 4, 5, 6],
				focusIndex: -1,
				focus: true,
				count: "",
				timer: null,
				price: "",
				batId: "",
				orderNo: "",
				msgCodeSeq: "",
				off2: true,
				signMsgMerTranNo: "",
				mobileNo: "",
				certNo: "",
				accountNo: "",
				accountName: "",
				batId: "",
				orgId: ""
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false
			}
			this.back();
			return true
		},
		onLoad(option) {
			this.orgId = option.orgId
			this.mobileNo = option.phone
			this.batId = option.batId
			this.signMsgMerTranNo = option.signMsgMerTranNo
			this.sendCodeAstrict()
		},
		watch: {
			smsCode: {
				async handler(newName, oldName) {
					if (newName.length == 6) {
						uni.showLoading({
							title: '签约中'
						})
						try {
							const result = await quickPaymentSuccess({
								signMsgText: this.smsCode,
								signMsgMerTranNo: this.signMsgMerTranNo,
								batId: this.batId,
								orgId: this.orgId
							})
							// console.log(result)
							if (result.code == 0) {
								if (result.data.responseStatus === 'F') {
									uni.hideLoading()
									this.smsCode = ""
									_showToast(result.data.responseMsg)
								}
								if (result.data.responseStatus === 'S') {
									uni.hideLoading()
									uni.navigateTo({
										url: `/pageBlank/qianYueSee/qianYueSee?batId=${this.batId}&orgId=${this.orgId}&phone=${this.mobileNo}`
									})
								}

							} else {
								uni.hideLoading()
								this.smsCode = ""
								_showToast(result.msg)
							}
						} catch (err) {
							uni.hideLoading()
							this.smsCode = ""
							_showToast(err)
						}


					}
					this.focusIndex = this.smsCode.length
				},
				immediate: true,
				deep: true
			}
		},
		components: {

		},
		methods: {
			focusInput(index) {
				this.focus = true
				this.focusIndex = this.smsCode.length
			},
			async reSend() {
				uni.showLoading({
					title: '短信发送中'
				})
				try {
					//在此运行代码
					const res = await quickPaymentSendCode({
						batId: this.batId,
						orgId: this.orgId
					})
					console.log(res)
					if (res.code === 0) {
						if (res.data.responseStatus === 'S') {
							this.signMsgMerTranNo = res.data.signMsgMerTranNo
							uni.hideLoading()
							_showToast(res.data.responseMsg)
							this.sendCodeAstrict()
						}
						if (res.data.responseStatus === 'F') {
							this.off2 = true
							uni.hideLoading()
							_showToast(res.data.responseMsg)
						}

					} else {
						uni.hideLoading()
						_showToast(res.data.responseMsg)
					}
				} catch (err) {
					uni.hideLoading()
					//在此处理错误
					_showToast(err)
				}
			},
			back() {
				var pages = getCurrentPages();
				uni.navigateBack({
					delta: pages.length - 2
				})
			},
			sendCodeAstrict() {
				this.off2 = false
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.off2 = true
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 按钮 */
	.confirm {
		margin-top: 40rpx;
		width: 325rpx;
		height: 80rpx;
		background: #07c160;
		border-radius: 6rpx;
		font-size: 30rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;

	}

	.bubble {
		position: relative;
		overflow: hidden;
	}

	.bubble:after {
		content: "44444";
		background: #5c9899;
		position: absolute;
		width: 750rpx;
		height: 750rpx;
		left: calc(50% - 375rpx);
		top: calc(50% - 375rpx);
		opacity: 0;
		margin: auto;
		border-radius: 50%;
		transform: scale(1);
		transition: all 0.5s ease-in-out;
	}

	.bubble:active:after {
		transform: scale(0);
		opacity: 1;
		transition: 0s;
	}

	page {
		height: 100%;
		width: 100%;
	}

	page-body {
		height: 100%;
		width: 100%;
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.confirm-input {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		overflow: hidden;

		.mock-input {
			position: relative;
			display: inline-block;
			width: 92rpx;
			height: 96rpx;
			line-height: 96rpx;
			border: 2rpx solid #F2F2F2;
			border-radius: 12rpx;
			text-align: center;
			font-size: 48rpx;
			color: #757575;

			+.mock-input {
				margin-left: 18rpx;
			}

			&-item {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}

			.show {
				display: block;
				position: absolute;
				left: 20rpx;
				top: calc(50% - 29rpx);
				width: 4rpx;
				height: 58rpx;
				background: #3478F5;
				border-radius: 2rpx;
				animation: blink 1s linear infinite;
			}
		}

		.input {
			position: absolute;
			left: -100vw;
			top: 0;
			width: 400vw;
			height: 100%;
			opacity: 0;
		}
	}

	.kao {
		input {
			width: 0rpx;
			height: 0rpx;
		}
	}

	.main_box {
		padding: 24upx;
		box-sizing: border-box;
		overflow-y: auto;

		.resCode {
			margin-top: 40rpx;
			width: 325rpx;
			height: 80rpx;
			background: #e6e6e6;
			border-radius: 6rpx;
			font-size: 30rpx;
			color: #6a6a6a;
			line-height: 80rpx;
			text-align: center;
		}

		.inp {
			display: flex;
			margin-left: 10rpx;

			.codesp {
				width: 92rpx;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				opacity: 1;
				border: 2rpx solid #ACACAC;
				margin-right: 22rpx;
				text-align: center;
			}

			.codesp:last-child {
				line-height: 96rpx;
				text-align: center;
				width: 92rpx;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				opacity: 1;
				border: 2rpx solid #ACACAC;
				margin-right: 0rpx;
				text-align: center;
			}
		}

		.fix_title {
			margin: 30upx 0 60upx 0;
			font-size: 40upx;
			font-weight: bolder;
			display: flex;
			align-items: center;
			margin-left: 10rpx;

			&::before {
				content: '';
				height: 36upx;
				width: 12upx;
				background-image: linear-gradient(to bottom, #c3defc, #007AFF);
				margin-right: 12upx;
				border-radius: 6upx;
			}
		}

		.txt {
			height: 46rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #020202;
			line-height: 46rpx;
			margin-bottom: 68rpx;
			margin-left: 32rpx;
			margin-top: 56rpx;

		}

	}
</style>
